<template>
	<div class="datil">
		<div class="datil_top">
			<i class="el-icon-arrow-left" style="float: left;font-size: 1.8rem;margin-left: 4%;" @click="fh"></i>
			{{user.username}}
			<i class="el-icon-arrow-left" style="float: right;font-size: 1.8rem;margin-right: 4%;opacity: 0;" @click="fh"></i>
			
		</div>
		<div class="homePage_div flex">
			<div class="homePage_img" @click="imageClick2">
				<img :src="user.head_img_s" @error='(e)=>{e.target.src="../../../../../static/img/images/people.jpg"}'  />
			</div>
			<div class="homePage_text flex1">
				<div class="homePage_text1 flex align_center">
					<span class="homePage_texts1" >{{user.username}}</span>
					<img :src="user.gender=='2'?'../../../../../static/img/images/home4.png':'../../../../../static/img/images/home5.png'" />
					<span class="homePage_texts2 transform09">{{user.jw_purpose_name}}</span>
				</div>
				<div class="homePage_text2 flex align_center">
					{{user.age}}岁<i class="transform09">|</i>{{user.height}}cm<i class="transform09">|</i>{{user.place}}

				</div>
				<div class="homePage_text3">
					<span :class="user.is_hui==0?'hui':''">VIP</span>
					<span  :class="user.is_phone==0?'hui':''"><i class="el-icon-mobile-phone"></i>{{user.is_phone==0?'未认证':'已认证'}}</span >
					<span  :class="user.is_member_code==0?'hui':''"><img src="../../../../../static/img/images/wd1.png" />{{user.is_member_code==0?'未认证':'已认证'}}</span>
				</div>
				
			</div>
			<div class="homePage_right">
				<p style="height: 2.5rem;text-align: center;" class="clear2">
					<i class="el-icon-arrow-down" style="font-weight: bold;color: #1c1c1c;font-size: 1.8rem;" @click="show=true"></i>
				</p>
				<div @click="dianzan" style="height: 3.7rem;font-size: 1.3rem;padding: 0 0.8rem;">
					<img :src="user.is_likes!=1?'../../../../../static/img/images/datal_zan.jpg':'../../../../../static/img/images/datal_zan2.png'" style="width: 2.4rem;" />
					<p style="text-align: center;">{{user.like_count==0?'点赞':user.like_count}}</p>
				</div>
			</div>
			
		</div>
		<div style="width: 100%;overflow: auto;" class="datil_img flex align_center" v-if="user.head_list.length!=0">
			<div style="white-space: nowrap;height: 5rem;">
				<div @click.stop="imageClick(user.head_list,key2)" v-for="(data,key) in user.head_list" style="display: inline-block;margin-right: 0.5rem;width: 5rem;height: 5rem;">
					<img :src="data.img_url_s"  style="display: block;width: 5rem;height: 5rem;object-fit: cover;" />
				</div>
			</div>
		</div>
		<div class="datil_img flex align_center" v-else>
			<img src="../../../../../static/img/images/datil_img.jpg"  />
			对方暂时还没有上传照片哦
		</div>
		<div class="datil_tab clear2">
			<div @click="datil_tab_i=1" class="datil_tabd  " :class="{'datil_tabd2':datil_tab_i==1}">
				<span>
					主页
				</span>
			</div>
			<div @click="datil_tab_i=2" class="datil_tabd  " :class="{'datil_tabd2':datil_tab_i==2}">
				<span>
					资料
				</span>
			</div>
			<div @click="datil_tab_i=3" class="datil_tabd   " :class="{'datil_tabd2':datil_tab_i==3}">
				<span>
					动态
				</span>
			</div>
		</div>
		<div v-show="datil_tab_i==1">
			<div class="datil_text1">
				<p class="datil_texttitle">
					<span></span>
					个性签名
				</p>
				<p class="datil_textcontent" :class="contentShow?'datil_textcontent2':''">
					{{user.make_friends.content}}
				</p>
				<i @click="contentShow=true" v-if="!contentShow" class="el-icon-arrow-down" style="font-weight: bold;color: #e7e9ee;font-size: 1.8rem;display: block;text-align: center;"></i>
			</div>
			<div class="datil_text2">
				<p class="datil_texttitle">
					<span></span>
					交友条件
				</p>
				<div class="datil_textcontent2">
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">年龄：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.age=='未选择'?user.make_friends.age:user.make_friends.age+'岁'}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">身高：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.height=='未选择'?user.make_friends.height:user.make_friends.height+'cm'}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">学历：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.education}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">月收入：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.monthly_income=='未选择'?user.make_friends.monthly_income:user.make_friends.monthly_income+'元'}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">居住地：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.address}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">情感状况：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.marriage_status_name}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">住房情况：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.hous_status}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">信仰：</p>
						<p class="flex1 datil_textcontent2p2">{{user.make_friends.islam}}</p>
					</div>
					
					
				</div>
			</div>
		</div>
		<div v-show="datil_tab_i==2">
			<div class="datil_text2">
				<p class="datil_texttitle">
					<span></span>
					基本资料
				</p>
				<div class="datil_textcontent2">
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">ID：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.id}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">年龄：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.age=='未选择'?user.basic_info.age:user.basic_info.age+'岁'}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">身高：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.height=='未选择'?user.basic_info.height:user.basic_info.height+'cm'}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">学历：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.education}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">月收入：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.monthly_income=='未选择'?user.basic_info.monthly_income:user.basic_info.monthly_income+'元'}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">居住地：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.address}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">情感状况：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.marriage_status_name}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">住房情况：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.hous_status}}</p>
					</div>
					<div class="flex datil_textcontent2d">
						<p class="datil_textcontent2p1">信仰：</p>
						<p class="flex1 datil_textcontent2p2">{{user.basic_info.islam}}</p>
					</div>
					
					
				</div>
			</div>
		</div>
		<div v-show="datil_tab_i==3">
			<img src="../../../../../static/img/productNone.png" style="width: 30%;display: block;margin: 8rem auto 0 auto;"  />
			<p style="text-align: center;color:#8a8a8a;font-size: 1.4rem;">暂未发布任何动态</p>
		</div>
		<div style="width: 100%;height: 3.2rem;"></div>
		<div class="datil_foot" v-if="user.basic_info.id!=Wuid">
			<div class="datil_footd flex justify_cen" @click="jump(user.im_identifier)"><img src="../../../../../static/img/images/datil_f1.png" />聊天</div>
			<div class="datil_footd flex justify_cen align_center" @click="guangzhu()"><i class="el-icon-view" style="font-size: 2rem;"></i>{{user.is_follow!=1?'关注':'已关注'}}</div>
		</div>
		<div @click.stop="show=false" class="messagelistshow" :style="{'height':bodyheight+'px'}" v-if="show"></div>
		<transition name="el-zoom-in-bottom">
	        <div v-show="show" class="messagelist">
	        	<div class="messagelistd">
	        		<p @click.stop="message(1)" :class="user.shield.is_disturb==1?'hui2':''">消息免打扰</p>
	        		<p @click.stop="message(2)" :class="user.shield.is_shield==1?'hui2':''">屏蔽TA的动态</p>
	        		<p @click.stop="message(3)" :class="user.shield.is_black==1?'hui2':''">拉黑</p>
	        		<p @click.stop="message(4)" >投诉</p>
	        	</div>
	        	<div class="messagelistd">
	        		<p @click.stop="show=false">取消</p>
	        	</div>
	        </div>
	    </transition>
	    <rztk  @rzUp="change" ref='child1'></rztk>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import rztk from '../../../common/rztk.vue';
	export default {
		components:{
            rztk
        },
		
		data: function() {
			return {
				datil_tab_i:1,
				show:false,
				bodyheight:0,
				auid:0,
				user:{
					make_friends:{},
					head_list:[],
					basic_info:{},
					shield:{
						is_disturb:2,
						is_shield:2,
						is_black:2
						
					},
					
				},
				list:{},
				contentShow:false,
				rzTure:false,
				Wuid:0,

			}
		},
		mounted() {
			this.bodyheight=document.body.offsetHeight;
			this.auid=this.$route.query.id;
			this.getUserInfo(this.auid);
			this.Wuid=window.uid;
		},
		methods: {
			change(val){
				this.rzTure=val;
			},
			imageClick2(imgObj,key) {
			    let imgArray = [];
			    
			 	imgArray.push(this.user.head_img);
			    
			    WeixinJSBridge.invoke('imagePreview', {   
			        'current' : imgArray[0],  
			        'urls' : imgArray  
			    });  
			},
			imageClick(imgObj,key) {
			    let imgArray = [];
			    for( let i in imgObj){
			    	imgArray.push(imgObj[i].img_url);
			    }
			 	
			    
			    WeixinJSBridge.invoke('imagePreview', {   
			        'current' : imgArray[key],  
			        'urls' : imgArray  
			    });  
			},
			guangzhu(){
				this.$http.post(this.defines.setFollow, {
						uid: window.uid ,
						b_uid:this.auid,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.$set(this.user,'is_follow',data.data.data.status)
						},
						(error) => {
							Toast(error)
							
						}
					);
			},
			dianzan(){
				this.$http.post(this.defines.setLikes, {
						uid: window.uid ,
						b_uid:this.auid,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.getUserInfo(this.auid);
						},
						(error) => {
							Toast(error)
						}
					);
			},
			fh(){
        		window.history.go(-1);
        	},
			message(Type){
				if(Type==4){
					this.$router.push({
						path: '/dtjb',
						query: {
							'type':1,
							'data':JSON.stringify(this.user)
						}
					})
					return false;
				}
				this.$http.post(this.defines.setUserShield, {
						uid: window.uid ,
						b_uid:this.auid,
						type:Type
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.show=false;
							Toast('设置成功')
					        let html = parseInt(Type);
					        switch(html){
					        	case 1:
					        		this.$set(this.user.shield,'is_disturb',data.data.data.status)
					        		break;
					        	case 2:
					        		this.$set(this.user.shield,'is_shield',data.data.data.status)
					        		break;
					        	case 3:
					        		this.$set(this.user.shield,'is_black',data.data.data.status)
					        		break;
					        }
						},
						(error) => {
							this.$message({
					          message: error,
					          type: 'error'
					        });
						}
					);
				
			},
			getUserInfo(auid){
				const loading=this.$loading({
		          lock: true,
		          text: 'Loading',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
				this.$http.post(this.defines.getUserInfo, {
						uid: window.uid ,
						q_uid:auid,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							let html=data.data.data.list;
							this.user=html;
							
							console.log(this.user.head_list.length)
							loading.close();
						},
						(error) => {
							console.log(error);
						}
					);
				
			},
			jump(im_identifier){
				if(this.rzTure){
					location.href='../../../../../static/web/index.html?bid='+this.auid+'&uid='+window.uid
				}
				else{
					this.$refs.child1.handleParentClick();
				}
			}
		}
	}
</script>

<style scoped>
	.datil_top {
		text-align: center;
		color: #1c1c1c;
		font-size: 1.6rem;
		line-height: 1.6rem;
		padding: 3% 0;
		border-bottom: 1px solid #e7e9ee;
	}
	.homePage_div {
		background: #fff;
		border-radius: 1.5rem;
		padding: 4%;
		width: 92%;
	}
	
	.homePage_img {
		width: 6.7rem;
		border-radius: 0.5rem;
		overflow: hidden;
		height: 6.7rem;
		margin-right: 4%;
		
	}
	
	.homePage_img img {
		height: 6.7rem;
		display: block;
		width: 6.7rem;
		object-fit: cover;
	}
	
	.homePage_text1 {
		height: 2.5rem;
	}
	
	.homePage_text1 img {
		margin: 0 2%;
		height: 1.2rem;
	}
	
	.homePage_texts1 {
		font-size: 1.3rem;
		color: #42475c;
		overflow: overlay;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.homePage_texts2 {
		white-space: nowrap;
		color: #fff;
		background: #4297ff;
		border-radius: 3px;
		padding: 0px 4px;
		font-size: 1.2rem;
		white-space: nowrap;
	}
	
	.homePage_text2 {
		font-size: 12px;
		color: #8a8a8a;
		height: 1.5rem;
		line-height: 1.5rem;
		margin-bottom: 0.6rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.homePage_text2 i {
		color: #505050;
		font-size: 1rem;
		font-weight: bold;
		padding: 0 3px;
		font-style: inherit;
	}
	.homePage_text3 {
		text-align: left;
		font-size: 1.2rem;
	}
	
	.homePage_text3 span {
		display: inline-block;
		height: 19px;
		line-height: 19px;
		background: #4297ff;
		color: #fff;
		margin-right: 3%;
		padding: 1px 2px 0px 2px;
		border-radius: 3px;
		white-space: nowrap;
	}
	
	.homePage_text3 span img {
		height: 1.2rem;
		padding-top: 2px;
		display: block;
		float: left;
	}
	.datil_img{
		font-size: 1.4rem;
		color: #e7e9ee;
		width: 100%;
		padding: 3% 4%;
		box-sizing: border-box;
		border-top: 1px solid #e7e9ee;
		border-bottom: 6px solid #e7e9ee;
		
	}
	.datil_img img{
		width: 5.4rem;
		margin-right: 2%;
	}
	.datil_tab{
		width: 100%;
		padding: 0 4%;
		box-sizing: border-box;
		padding-bottom: 2px;
		border-bottom: 1px solid #e7e9ee;
	}
	.datil_tabd{
		width: 33.3%;
		display: block;
		text-align: center;
		font-size: 1.4rem;
		float: left;
		height: 3.5rem;
		line-height: 3.5rem;
		color: #505050;
		
		
	}
	.datil_tabd span{
		display: inline-block;
		
		border-bottom: 3px solid transparent;
		
	}
	.datil_tabd2 span{
		border-bottom: 3px solid #b042ff;
		color: #b042ff;
	}
	.datil_text2{
		width: 100%;
		padding: 4% 4% 2% 4%;
		box-sizing: border-box;
	}
	.datil_text1{
		width: 100%;
		padding: 4% 4% 2% 4%;
		box-sizing: border-box;
		border-bottom: 6px solid #e7e9ee;
	}
	.datil_texttitle{
		font-size: 1.4rem;
		color: #505050;
		height: 1.6rem;
		line-height: 1.6rem;
		
	}
	.datil_texttitle span{
		border-left: 0.3rem solid #ff4242;
		display: block;
		height: 1.4rem;
		float: left;
		margin-top: 0.1rem ;
		margin-right: 0.8rem;
	}
	.datil_textcontent{
		padding: 1rem 1.1rem;
		box-sizing: border-box;
		width: 100%;
		font-size: 1.4rem;
		color: #8a8a8a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.datil_textcontent2{
		white-space: normal;
	}
	.datil_textcontent2{
		padding: 1rem 1.1rem;
		box-sizing: border-box;
		width: 100%;
		font-size: 1.3rem;
	}
	.datil_textcontent2d{
		width: 100%;
		margin-bottom: 1.5rem;
	}
	.datil_textcontent2p1{
		color: #505050;
		width: 6.5rem;
	}
	.datil_textcontent2p2{
		color: #8a8a8a;
	}
	.messagelist{
		width: 100%;
		padding: 0 2%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;
		box-sizing: border-box;
	}
	.messagelistd{
		width: 100%;
		overflow: hidden;
		border-radius: 1rem;
		background: #fff;
		opacity: 1;
		margin-bottom: 0.5rem;
	}
	.messagelistd p{
		font-size: 1.5rem;
		height: 4rem;
		color: #4297ff;
		line-height: 4rem;
		text-align: center;
		border-bottom: 1px solid #e7e9ee;
	}
	.messagelistd p:nth-last-child(1){
		border: 0;
	}
	.messagelistshow{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2;
	}
	.datil_foot{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top:1px solid #b5b5b5;
		background: #f9f9f9;
		padding: 1rem 0;
	}
	.datil_footd{
		width: 50%;
		float: left;
		font-size: 1.5rem;
		color: #b042ff;
		box-sizing: border-box;
		border-right: 1px solid #e7e9ee;
	}
	.datil_footd:nth-child(2){
		border: 0;
	}
	.datil_footd img{
		height: 1.6rem;
		margin-top: 2px;
	}
	.hui{
		background: #d1d1d1 !important;
	}
	.hui2{
		color: #e7e9ee !important;
	}
</style>
